<template>
	<view class="list-box">
		<view class="title space-between center">
			<view class="center">
				<text class="name">{{name}}</text>
				<text class="word" v-if="word">{{word}}</text>
			</view>
			<view class="all">
				<text>全部</text>
				<text class="iconfont icon-right"></text>
			</view>
		</view>
		
		<!-- 主要内容 -->
		<scroll-view class="list-scroll " scroll-x>
			<view class="list-scroll-view"  v-for="(item,index) in List ":key='index'>
				<List :item='item' :isColumn='true'></List>
			</view>
		</scroll-view>


	</view>

</template>

<script>
	import List from '@/pages/index/List.vue'
	export default {
		data() {
			return {

			}
		},
		props: {
			name: { // 名称
				type: String,
				default: '热门推荐'
			},
			word: { // 高亮单词，如： 'HOT'
				type: String,
				default: null
			},
			List: { // 高亮单词，如： 'HOT'
				type: Array,
				default: () => []
			}
		},
		methods: {

		},
		components: {
			List
		}

	}
</script>

<style lang='scss'>
	.list-box {
		margin-top: 60rpx;

		/* 标题 */
		.title {
			margin-bottom: 20rpx;

			.name {
				font-size: 38rpx;
				font-weight: 500;
				color: #303133;
				margin-right: 10rpx;
			}

			.word {
				/* 从左往右渐变 */
				background-image: linear-gradient(to right, red, orange);
				font-size: 20rpx;
				color: #fff;
				padding: 0 10rpx;
				border-radius: 30rpx 30rpx 30rpx 0;
			}

			.all {
				font-weight: normal;
				color: $mxg-text-color-grey;
				font-size: 28rpx;

				.iconfont {
					font-size: 25rpx;
				}
			}
		}
	}

	.swiper-list {
		height: 340px;

	}
	.list-scroll {
	 // 内容一行显示不换行
	 white-space: nowrap;
	 height: 380rpx;
	 .list-scroll-view {
	 display: inline-block;
	 width: 310rpx;
	 background-color: #fff;
	 padding: 0 10rpx;
	 margin-right: 20rpx;
	 border-radius: 20rpx;
	 box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
	 }
	 }
</style>
